import { useState } from "react"
import { useDispatch } from "react-redux";

export default function AddTodo() {
  const [todoVal, setTodoVal] = useState('');
  const dispatch = useDispatch();
  return (
    <div id="create-todo">
      <input
        id="new-todo"
        placeholder="What needs to be done?"
        autoComplete="off"
        type="text"
        value={todoVal}
        onChange={({ target }) => {
          setTodoVal(target.value)
        }}
        onKeyUp={(e) => {
          if (e.keyCode === 13 && todoVal.trim()) {
            dispatch({
              type: "TODOLIST_ADD",
              todo:todoVal,
            })
            setTodoVal('')
          }
        } }
      />
    </div>
  )
}